.base {
  display: inline-block;
  padding: 2px var(--cui-spacings-byte);
  font-size: var(--cui-body-s-font-size);
  font-weight: var(--cui-font-weight-semibold);
  line-height: var(--cui-body-s-line-height);
  text-align: center;
  letter-spacing: 0.25px;
  border-radius: var(--cui-border-radius-pill);
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-width);
  height: 24px;
  padding: 2px 4px;
}

/* Variants */

.success {
  color: var(--cui-fg-on-strong);
  background-color: var(--cui-bg-success-strong);
}

.warning {
  color: var(--cui-fg-on-strong);
  background-color: var(--cui-bg-warning-strong);
}

.danger {
  color: var(--cui-fg-on-strong);
  background-color: var(--cui-bg-danger-strong);
}

.neutral {
  color: var(--cui-fg-normal);
  background-color: var(--cui-bg-highlight);
}

.promo {
  color: var(--cui-fg-on-strong);
  background-color: var(--cui-bg-promo-strong);
}
